<template>
	<view class="fang_yi_box" :style="{height: windowHeight + 'px'}">
		<!-- 标题 -->
		<view class="title_box pv_20 text_center">
			<text class="title vertical_text mn fs_36_i color_fff fw_500">ᠬᠢᠵᠢᠭ ᠰᠡᠷᠭᠡᠢᠯᠡᠬᠦ ᠮᠡᠳᠡᠭᠡ ᠵᠠᠩᠭᠢ ᠨᠡᠮᠡᠬᠦ</text>
			
			<view class="add_btn">
				<i class="iconfont icon-a-ziyuan619 color_fff fs_40_i" @click="submitFangYi()"></i>
			</view>
		</view>
		
		<view class="user_info">
			<!-- 疫苗名称 -->
			<view class="name_box user_info_input">
				<text class="vertical_text mn fs_40 mb_10">ᠸᠠᠺᠼᠢᠨ᠎ᠤ ᠨᠡᠷᠡᠢᠳᠦᠯ</text>
				<editor 
					id="editor_name" 
					class="vertical_text mn pt_5 pl_8" 
					@ready="onEditorNameReady()" 
					@input="getEditorName">
				>
				</editor>
			</view>
			
			<!-- 疫苗剂量 -->
			<view class="dose_box user_info_input">
				<text class="vertical_text mn fs_40 mb_10">ᠸᠠᠺᠼᠢᠨ᠎ᠤ ᠬᠡᠮᠵᠢᠶ᠎ᠡ (ml)</text>
				<editor 
					id="editor_dose" 
					class="vertical_text pt_5 pl_8"
					@ready="onEditorDoseReady()" 
					@input="getEditorDose"
				>
				</editor>
			</view>
			
			<!-- 上传图片 -->
			<view class="upload_img">
				<view class="example-body">
					<view class="img_list">
						<!-- 服务器中的图片 -->
						<view class="img_item" v-for="(item, index) in addFangYiData.files" :key="index">
							<image :src="IMG_URL + item.path" mode=""></image>
							
							<!-- 删除 icon -->
							<view class="delete_icon">
								<uni-icons type="closeempty" size="18" @click="deleteImg(index)"></uni-icons>
							</view>
						</view>
						
						<!-- 添加图片按钮 -->
						<view class="add_img_item" v-show="isShow">
							<i class="iconfont icon-tianjiatupianlimianjiahao mainColor fs_80_i" @click="chooseImg"></i>
						</view>
					</view>
				</view>
			</view>
		</view>	
		
		<!-- 内容 -->
		<view class="content_box" v-show="isShowText">
			<view class="popup-content">	

				<!-- 疫苗名称 -->
				<view class="line h_90 lh_40">
					<view class="label">
						<text class="vertical_text mn pt_12">ᠸᠠᠺᠼᠢᠨ᠎ᠤ ᠨᠡᠷᠡᠢᠳᠦᠯ</text>
					</view>
					<view class="input">
						<input class="h_full" type="text" v-model="addData.num" placeholder=" " />
					</view>
				</view>
				
				<!-- 疫苗剂量 -->
				<view class="line h_90 lh_40">
					<view class="label">
						<text class="vertical_text mn pt_12">ᠸᠠᠺᠼᠢᠨ᠎ᠤ ᠬᠡᠮᠵᠢᠶ᠎ᠡ (ml)</text>
					</view>
					<view class="input">
						<input class="h_full" type="text" v-model="addData.dose" placeholder=" " />
					</view>
				</view>

				<!-- 上传图片 -->
				<view class="upload_img">
					<view class="example-body">
						<view class="img_list">
							<!-- 服务器中的图片 -->
							<view class="img_item" v-for="(item, index) in addFangYiData.files" :key="index">
								<image :src="IMG_URL + item.path" mode=""></image>
								
								<!-- 删除 icon -->
								<view class="delete_icon">
									<uni-icons type="closeempty" size="18" @click="deleteImg(index)"></uni-icons>
								</view>
							</view>
							
							<!-- 添加图片按钮 -->
							<view class="add_img_item" v-show="isShow">
								<i class="iconfont icon-tianjiatupianlimianjiahao mainColor fs_80_i" @click="chooseImg"></i>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getSystemInfo from '../../mixins/basic.js'
	import NET from '@/utils/request.js'
	import API from '@/config/api.js'
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				isShow: true,
				isShowText: false,
				id: '',
				addFangYiData: {
					name: '',
					dose: '',
					files: []
				},
			}
		},
		onLoad(options) {
			// 获取设备高度
			this.getSystemHeight()
		
			this.id = options.id
		},
		methods: {
			// 提交防疫
			submitFangYi() {
				let params = {
					breedingId: this.id,
					createTime: this.getCurrentTime(),
					drugNameMn: this.addFangYiData.name.action ? this.addFangYiData.name.action.args.html : this.addFangYiData.name,
					dosage: this.addFangYiData.dose.action ? this.addFangYiData.dose.action.args.html : this.addFangYiData.dose,
					files: this.addFangYiData.files
				}
				NET.request2(API.saveInsYangZhiDangAn, params, 'POST')
				.then(res => {
					console.log('提交防疫 : ', res)
					if (res.code == 200) {						
						uni.showToast({
							title: '提交成功！', icon: 'success'
						})
						
						this.addFangYiData.name = ''
						this.addFangYiData.dose = ''
						this.addFangYiData.files = []
					}
				})
				.catch(err => {
					uni.showToast({
						title: '提交失败！',
						icon: 'none'
					})
					console.error('提交失败！', err)
				})

			},
			
			// 选择图片
			chooseImg() {
				let that = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],  
					sourceType: ['album', 'camera'], 
					success: function (res) {
						console.log(res)
						
						for (let i in res.tempFilePaths) {
							let params = {
								file: res.tempFilePaths[i],
								type: 'image'
							}
							
							NET.upload(API.uploadFile, params, res.tempFiles[i].path)
							.then(res => {
								let respon = JSON.parse(res)
								if (respon.code == 200) {						
									that.addFangYiData.files.push(respon.data)
								}
							})
							.catch(err => {
								uni.showToast({
									title: '图片上传失败！',
									icon: 'none'
								})
								console.error('图片上传失败！', err)
							})
						}
					}
				})
			},
			
			// 删除图片
			deleteImg(index) {
				this.addFangYiData.files.splice(index, 1)
			},
			
			
			// 疫苗名称
			onEditorNameReady(){
				uni.createSelectorQuery().select('#editor_name').context((res) => {   
					this.addFangYiData.name = res.context    
					this.addFangYiData.name.setContents({    
						html: ''
					})    
				}).exec()    
			},
			
			getEditorName(e){
				this.addFangYiData.name = (e.detail.text).substring(0, e.detail.text.length - 1);
			},
			
			// 疫苗剂量
			onEditorDoseReady(){
				uni.createSelectorQuery().select('#editor_dose').context((res) => {   
					this.addFangYiData.dose = res.context    
					this.addFangYiData.dose.setContents({    
						html: ''
					})    
				}).exec()    
			},
			
			getEditorDose(e){
				this.addFangYiData.dose = (e.detail.text).substring(0, e.detail.text.length - 1);
			},

		}
	}
</script>

<style lang="less" scoped>
	
	.fang_yi_box {
		width: 100%;
		// border: 1px solid #f00;
		box-sizing: border-box;
		position: relative;
		
		// 标题
		.title_box {
			width: 80rpx;
			height: 100%;
			background-color: #1c9aa0;
			box-sizing: border-box;
			position: relative;
			float: left;
			
			.title { font-weight: 500 !important; }
			.add_btn {
				width: 100%;
				height: 50rpx;
				position: absolute;
				bottom: 30rpx;
			}
		}
		
		.user_info {
			width: calc(100% - 80rpx);
			height: 100%;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			right: 0;
			padding-left: 20rpx;
			box-sizing: border-box;
			border: 1px solid #1c9aa0;
			
			.name_box, .dose_box {
				width: 80rpx;
				height: 100%;
				float: left;
				text-align: center;
				padding-top: 20rpx;
				// border: 2rpx solid #1c9aa0;
				border-left: none;
				box-sizing: border-box;
				position: relative;
			}
			
			.name_box, .dose_box {
				text, editor{
					position: absolute;
					transform: translateX(-50%);
				}
				
				text { top: 20rpx; left: 50%; padding-left: 5rpx; }
				editor { top: 24%; left: 50%; padding-left: 20rpx; }
			}
			
			.upload_img {
				width: calc(100% - 160rpx);
				height: 100%;
				white-space: normal;
				position: absolute;
				top: 0;
				left: 210rpx;
				border: none !important;
				padding: 0 !important;
				
				.example-body {
					
					.img_list {
						.img_item { width: 39% !important; height: 200rpx !important; }
						.add_img_item { width: 35% !important; height: 180rpx !important; }
					}
				}
			}
		}	
		
		
	
		// 内容
		.content_box {
			width: calc(100% - 80rpx);
			height: 100%;
			overflow-y: auto;
			float: left;
			// padding: 10rpx 0;
			box-sizing: border-box;
			// border: 1px solid #090;
			
			.popup-content {
				width: 100%;
				overflow: auto;
				background-color: #fff;
				
				.title {
					width: 100%;
					padding-left: 10px;
					border-bottom: 1px solid #ccc;
					text {
						color: #1c9aa0;
						font-size: 16px;
					}
				}
				
				.line {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					border-bottom: 1px solid #ccc;
					position: relative;
					
					.label {
						width: 30%;
						padding-left: 10px;
						text {
							width: 100%;
						}
					}
					.input {
						width: 60%;
						position: absolute;
						top: 23%;
						left: 35%;
						
						input {
							width: 100%;
						} 
					}
				}
			}
		}
	}
</style>

<style lang="less">
	@import url('~@/static/css/plugin.css');
</style>
